<template>
  <a-modal
    :visible="visible"
    :title="title"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formExpertRef"
      :colon="false"
      :model="form"
      :labelCol="{ style: { width: '100px', 'margin-bottom': '16px' } }"
      :wrapperCol="{ span: 12 }"
    >
      <a-form-item
        label="所有者手机号"
        name="phone"
        :rules="[
          { required: true, message: '请输入所有者手机号' },
          { validator: phoneValidate, trigger: 'blur' }
        ]"
      >
        <a-input
          v-model:value="form.phone"
          placeholder="请输入"
          class="formWidth"
          allowClear
          :disabled="isPhoneReadonly"
        />
      </a-form-item>
      <a-form-item
        label="团队名称"
        name="teamName"
        :rules="[{ required: true, message: '请输入团队名称' }]"
      >
        <a-input v-model:value="form.teamName" placeholder="请输入" class="formWidth" allowClear />
      </a-form-item>
      <a-form-item
        label="所属企业"
        name="entName"
        :rules="[{ required: true, message: '请输入所属企业' }]"
      >
        <a-input v-model:value="form.entName" placeholder="请输入" class="formWidth" allowClear />
      </a-form-item>
      <a-form-item
        label="人数上限"
        name="peopleLimit"
        :rules="[{ required: true, message: '请输入人数上限' }]"
      >
        <a-input
          v-model:value="form.peopleLimit"
          placeholder="请输入"
          class="formWidth"
          allowClear
        />
      </a-form-item>

      <a-form-item
        name="expiredTime"
        label="有效期限至"
        :rules="[{ required: true, message: '请选择有效期限' }]"
      >
        <a-date-picker
          v-model:value="form.expiredTime"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item name="auditStatus" label="内部文档权限" has-feedback>
        <a-select v-model:value="form.authorityStatus">
          <a-select-option :value="0">否</a-select-option>
          <a-select-option :value="1">是</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="formulaAuthority" label="配方检索权限" has-feedback>
        <a-select v-model:value="form.formulaAuthority">
          <a-select-option :value="0">否</a-select-option>
          <a-select-option :value="1">是</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { type TeamForm } from '@/api/manage'
import { usePassword } from '@/hook/usePassword'
import { ref } from 'vue'
interface Props {
  visible: boolean
  title?: string
  confirmLoading?: boolean
  form: TeamForm
  isPhoneReadonly: boolean
}
const props = withDefaults(defineProps<Props>(), {
  title: '团队',
  isPhoneReadonly: false
})

const emit = defineEmits<{
  (e: 'handleOk', form: TeamForm): void
  (e: 'update:visible', visible: boolean): void
}>()

const formExpertRef = ref()

const handleOk = () => {
  formExpertRef.value
    .validate()
    .then(() => {
      console.warn(123)
      emit('handleOk', props.form)
    })
    .catch((err: Error) => {
      console.log(err)
    })
  // emit('update:visible', false)
}

const handleCancel = () => {
  formExpertRef.value.resetFields()
  emit('update:visible', false)
}

const { phoneValidate } = usePassword({})
</script>

<style scoped></style>
